/*
* xxxx科技有限公司版权所有（）.
* Copyright (c) 2019, and/or its affiliates. All rights reserved.
* @Date: 2020.08.03 21:52.
* @Author
* @Description  加油 -- 详情页面
**/
<template>
    <div class="ca-detail pb60">
        <img :src="activityInfoPic" class="ca-banner"/>
        <article class="ca-pd15">
            <ul class="ca-list">
                <li class="pr-tips"><i class="el-icon-bell"></i>本日活动名额<span>剩余{{number}}</span>位，快来购买吧！</li>
                <li :key="item.id" v-for="item in list">
                    <img src="../../assets/img/logo.png"/>
                    <p class="h8"></p>
                    <h3>{{item.goodsName}}</h3>
                    <em>￥ {{item.distributorGoodsPrice / 100}}</em>
                    <span>优惠 ￥{{item.salevalue}}</span>
                    <button @click="handleBuyClick" class="gray ca-btn fr mr15" v-if="disabled">立即下单</button>
                    <button @click="handleBuyClick(item)" class="ca-btn fr mr15" v-else>立即下单</button>

                    <div class="pr-discount" v-if="item.distributorGoodsPrice/100 == '500'">{{activityInfo}}</div>
                </li>
            </ul>
            <section class="ca-info">
                <h1>活动规则</h1>
                <div v-html="activityRemarks"></div>
                <!--  {{activityRemarks || '暂无activityRemarks'}}-->
            </section>
        </article>

        <footer-tab flag="detail"></footer-tab>
    </div>
</template>

<script>
import dayjs from 'dayjs'
import urls from '@/api/urls'
// import { weekObj } from '@/utils/const'
import { getData, postData } from '@/api/'
import footerTab from '@/views/FooterTab/'

const imgUrl = require('../../assets/img/banner.png')

export default {
  name: 'Detail',
  props: {},
  components: { footerTab },
  data () {
    return {
      list: [],
      number: 0,
      orderData: {}, // 当前最新商品活动信息
      disabled: false, // 立即下单 flag
      activityRemarks: '',
      activityInfoPic: imgUrl,
      activityInfo: '送10元中油好客电子券',
    }
  },
  watch: {},
  created () {
      if (window.history && window.history.pushState) {
        window.onpopstate = function () {
            window.history.pushState('forward', null, '#');
            window.history.forward(1);
            wx.closeWindow()
        };
    }
    // this.checkInfo(68)
    this.getNewDetail() // 获取 最新 商品  详情
    // this.getNum() // 剩余位数
    this.getDescribe(localStorage.getItem('activeId')) // 获取描述
  },
  methods: {
    /**
     *@Description
     *@Return 获取 最新 商品 详情.
     **/
    getNewDetail () {
      getData({}, urls.newDetailUrl).then(res => {
        const result = res.result

        this.orderData = result
        this.list = result && result.goodsInfoList

        console.log('获取 最新 商品 详情--res.result------', res.result)
        console.log('获取 最新 商品 详情--res.this.orderData------', this.orderData)

        const startY = dayjs(result && result.activityStarttime).valueOf() // format('YYYY-MM-DD HH:mm:ss') // 活动 - 开始日期 - 年月日
        const endY = dayjs(result && result.activityEndtime).valueOf() // format('YYYY-MM-DD HH:mm:ss') // 活动 - 结束日期 - 年月日

        const startH = dayjs(result && result.starttime).second() // 活动 - 结束时间 - 时分秒
        const endH = dayjs(result && result.endtime).second() // 活动 - 结束时间 - 时分秒
        const weekDay = result && result.survivalDay
        const nowTime = new Date().getTime()

        if (nowTime > startY && nowTime < endY) {
          const nowDay = new Date().getDay() || '7'

          if (!weekDay.includes(nowDay)) { // weekObj[nowDay]
            this.disabled = true
          }
        }
        if (result && result.limitNum == 0) {
          this.$message.warning('今日优惠名额已满，需原价购买！')
        }

        this.getDescribe(result.id) // 获取描述 result.id
        this.getNum()

        console.log('startY, endY---------', startY, endY)
        console.log('startH, endH---------', startH, endH)
      })
    },
    /**
     *@Description
     *@Return 立即下单 按钮 - 事件监听 - 调用预下单接口.
     **/
    handleBuyClick (data) {
      if (this.disabled) {
        this.$message.warning('非活动日不可购买')
        return false
      } else {
        localStorage.setItem('saleValue', data.salevalue)
        this.checkInfo(data.id) // 判断当前活动内容是否满足条件
      }
      console.log('this.orderData-------------', this.orderData)
    },
    /**
     *@Description
     *@Return 判断当前活动内容是否满足条件.
     **/
    checkInfo (id) {
      const params = {
        activityId: this.orderData.id, // 活动id
        week: new Date().getDay(), // 当周日期 1~7表示
        time: dayjs().format('YYYY-MM-DD'), // 时间，时间为当天确定到日
        daytime: dayjs().format('HH:mm:ss'), // 当前时间 时间格式未hh-mm-ss
        phone: localStorage.getItem('phoneNum') || '13956253359', // 手机号
      }
      getData(params, urls.checkInfo).then(res => {
        // 当用购买次数上限了
        // 当前时间不能购买
        // 当前 券已经卖完
        console.log('判断当前活动内容是否满足条件-------------', res)
        this.getNewDetail() // 获取 最新 商品  详情 -- 活动不满足的时候 更新活动列表
        this.$router.push({ name: 'ExchangeDetail', params: { id } })
      }).catch((err => {
        console.log('判断当前活动内容是否满足条件-err------------', err)
        this.$message.warning('当用购买次数上限了')
      }))
    },
    /**
     *@Description
     *@Return 剩余位数.
     **/
    getNum () {
      console.log('this.orderData---', this.orderData)
      console.log('this.orderData.id---', this.orderData.id)
      const id = this.orderData.id || '4'
      getData({ id }, urls.numberUrl).then(res => {
        this.number = res.result
        console.log('位数-----', res)
      })
    },
    /**
     *@Description
     *@Return 获取活动id对应图片和说明信息.
     **/
    getDescribe (id) {
      getData({ id: id }, urls.describeUrl).then(res => {

        this.activityDescribe = res.result
        this.activityInfo = res.result.activityInfo
        this.activityRemarks = res.result.activityRemarks

        this.activityInfoPic = res.result && res.result.activityInfoPic || imgUrl // 活动装修 描述
        // "activityId": 0,
        // "activityInfo": "string",
        // "activityInfoPic": "string",
        // "activityPic": "string",
        // "activityRemarks": "string",
        // "createTime": "2020-09-09 21:22:25",
        // "id": 1

        console.log('获取活动id对应图片和说明信息-------------', res)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
    .ca-banner {
        width: 100%;
        height: 200px;
    }
    .ca-pd15 {
        padding: 15px 15px 0 15px;
        background: #f6f6f6;
    }
    /* 充值券列表 */
    .ca-list {
        // 提示区域
        .pr-tips {
            line-height: 36px;
            height: 36px;
            i {
                font-size: 14px;
                padding-right: 5px;
                padding-left: 15px;
            }
            i,
            span {
                font-size: 12px;
                color: #ffaa00;
            }
            span {
                padding: 0;
            }
        }
        li {
            position: relative;
            width: 100%;
            height: 90px;
            margin-bottom: 10px;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
            .h8 {
                height: 14px;
            }
        }
        img {
            float: left;
            width: 42px;
            height: 42px;
            margin: 10px 15px;
        }
        p {
            padding-top: 6px;
            color: #666;
        }
        h3 {
            font-size: 16px;
            font-weight: 500;
        }
        em {
            font-size: 15px;
            font-style: normal;
            color: #868686;
        }
        span {
            font-size: 14px;
            display: inline-block;
            margin-left: 10px;
            padding-top: 10px;
            color: #fe014a;
        }
    }
    // 列表中 优惠 提示
    .pr-discount {
        font-size: 10px;
        position: absolute;
        top: 0;
        right: 0;
        padding: 2px 10px;
        color: #fff;
        border-radius: 26px 0 0 26px;
        background: linear-gradient(94deg, #ff5544 18%, #c33324 174%);
    }
    .ca-btn {
        font-size: 14px;
        line-height: 28px;
        width: 90px;
        height: 28px;
        margin-top: 10px;
        color: #fff;
        border: none;
        border-radius: 28px;
        outline: none;
        background: rgba(255, 170, 0, 1);
    }
    .ca-btn.gray {
        background: #ccc;
    }

    /* 文字说明 区域 */
    .ca-info {
        font-size: 14px;
        line-height: 25px;
        word-break: break-all;
        color: #333;
        h1 {
            font-size: 18px;
            margin: 20px 0 10px 0;
            color: #4a4a4a;
        }
        p {
            margin-bottom: 20px;
            color: #888;
            time {
                margin-right: 10px;
            }
        }
    }
</style>
